<template>
	<view class="complaint">
		<view class="hearder">
			<view class="img-box" @click="Todetail">
				<u-image width="120rpx" height="140rpx" :src="OrderDe.image"></u-image>
			</view>
			<view class="txt-box">
				<view class="title">{{OrderDe.product || ''}}</view>
				<view class="titleone">服务时间:{{OrderDe.product_item || ''}}</view>
				<view class="titletwo">服务规格:{{OrderDe.product_detail || ''}}</view>
				<view class="price">￥{{OrderDe.order_amount_total || ''}}/台</view>
			</view>
		</view>
		<view class="main">
			<view class="main-top">
				<view class="main-title">投诉原因</view>
				<u-input v-model="complObj.complaint_desc" type="textarea" height="300" :clearable="false"
					:border="false" placeholder="请描述您的详细投诉原因,有助于更好的维护您的权益" maxlength="100" focus="true" />
			</view>
			<view class="main-form">
				<u-upload max-count="6" :action="url" :header="header" @on-success="uploadsuccess"></u-upload>
				<view class="survalue">{{complObj.complaint_desc.length}}/100</view>
			</view>

		</view>
		<view class="footer">
			<button class="btn" @click="getComplaint">确认提交</button>
		</view>
	</view>
</template>

<script>
	import { ResOrderDe, ResComplaint, ResUpload } from '@/untils/api.js'
	export default {
		data() {

			return {
				OrderDe: '',
				url: 'https://cleaning.51meteor.com/api/common/upload',
				header: {
					token: uni.getStorageSync('token')
				},
				complObj: {
					id: '',
					complaint_desc: '',
					complaint_images: []
				},

			}
		},
		onLoad(option) {
			this.getOrderDe(option.id)
			this.complObj.id = option.id

		},
		methods: {
			Todetail() {
				uni.navigateTo({
					url: `/pages/Home/Detail?id=${this.OrderDe.product_id}`
				})
				uni.setNavigationBarTitle({
					title: this.OrderDe.product
				})
			},
			// 图片上传之后的回调
			uploadsuccess(e) {
				this.complObj.complaint_images.push(e.data.fullurl)
			},
			async getOrderDe(id) {
				let idObj = { id: id }
				const { data: res } = await ResOrderDe(idObj)
				this.OrderDe = res.data
			},
			async getComplaint() {
				// 发起投诉
				const { data: res } = await ResComplaint(this.complObj)
				if (res.code != 1) return uni.$showMsg(res.msg)
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.complaint {
		padding: 0 25rpx 100rpx;
		height: 100%;
		background-color: #F7F7F7;
		overflow: hidden;

		.hearder {
			display: flex;
			margin: 50rpx 0 54rpx;

			.txt-box {
				margin-left: 15rpx;
				font-size: 30rpx;

				.title {
					font-weight: 700;
				}

				.titleone,
				.titletwo {
					color: #919191;
					font-size: 24rpx;
				}

				.price {
					color: #CB6C72;
				}
			}
		}

		.main {
			background-color: #fff;
			margin-bottom: 97rpx;
			padding: 37rpx 42rpx 32rpx 32rpx;

			.main-top {
				.main-title {
					font-size: 26rpx;
					font-weight: 700;
					margin-bottom: 42rpx;
				}
			}


			.main-form {
				position: relative;

				.survalue {
					position: absolute;
					right: 0;
					bottom: 5rpx;

				}
			}

		}

		.footer {
			.btn {
				width: 593rpx;
				height: 84rpx;
				font-size: 28rpx;
				line-height: 84rpx;
				border-radius: 40rpx;
				background-color: #01C3A8;
				color: #fff;
			}

		}
	}
</style>
